<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
        修饰符：
            - .lazy 取代 input 监听,修改为 change 事件
            - .number 输入字符串转为有效的数字 ( 使用js的 parseFloat 方法完成数据转换，同时包含是否可以转换的判断)
                ==> 如果输入值可以转换为有效数值，会完成转换，否则原值输出
                ==> 输入值进行有效数值转换采用的是 parseFloat 的逐位转换
            - .trim 输入首尾空格过滤 
        -->
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg"> <br>
        <input type="text" v-model.lazy="msg"> <br><br>

        <p>num:{{ num }} - {{ typeof(num) }}</p>
        <input type="text" v-model="num"><br>
        <input type="text" v-model.number="num"> <br>
        <input type="number" v-model.number="num"> <br>
        <!-- vue3 中当输入框为 number 型是，自动使用 number 修饰符 -->
        <input type="number" v-model="num"> <br><br>

        <pre>|{{ info }}|</pre>
        <input type="text" v-model="info"> <br>
        <input type="text" v-model.trim="info"> <br>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"msg",
                    num:10,
                    info:"info"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>